<template>
	<div>
		<!-- here is the nav start-->
		<div class="nav-head">
			<a @click="CloseSearch">
				<img class="arrow1" src="../../assets/icon-close45.png">
			</a>
			<div class="title">
				<input type="text" placeholder="搜索音乐、歌词、歌单" v-model="searchinfo" @change="InputSearch" @focus="ListHide">
				<img src="../../assets/fangda.jpg" alt="">
				<div class="search-info-list" v-show="showlist">
					<ul>
						<li v-for="(item,index) in searchlist" :key="index"><router-link to="{name:'sinDet',params:{'songid'=item.songid}}">{{item.songname}}</router-link></li>
					</ul>
				</div>
			</div>
			<span>语音</span>
		</div>
		<!-- here is the nav end -->
		
		<!-- here is the hot search start -->
		<div class="hot-box">
			<div class="hot">
				<h2>热门搜索</h2>
				<div class="search-item">
					<a href="#">林俊杰</a>
					<a href="#">周杰伦</a>
					<a href="#">金玟岐</a>
					<a href="#">七里香</a>
					<a href="#">薛之谦</a>
					<a class="last" href="#">告白气球</a>
				</div>
			</div>
		</div>
		<!-- here is the hot search end -->
		<!-- 间距 -->
		<p class="distance"></p>
		<!-- here is the history of search start -->
		<div class="history-box"> 
			<div class="history">
				<div class="title">
					<span>搜索历史</span>
					<span class="two">清空历史</span>
				</div>
				<ul class="items">
					<li>
						<span>田馥甄</span>
						<span class="two"><img src="../../assets/icon-close20.png" alt=""></span>
					</li>
					<li>
						<span>告白气球</span>
						<span class="two"><img src="../../assets/icon-close20.png" alt=""></span>
					</li>
					<li>
						<span>王力宏</span>
						<span class="two"><img src="../../assets/icon-close20.png" alt=""></span>
					</li>
					<li>
						<span>依然爱你</span>
						<span class="two"><img src="../../assets/icon-close20.png" alt=""></span>
					</li>
				</ul>
			</div>
		</div>
		<!-- here is the history of search end -->

	</div>
</template>

<script>
	
	export default{
		name:"search",
		data(){
			return{
				searchinfo:'',
				searchlist:'',
				showlist:false
			}
		},
		methods:{
			CloseSearch(){
				window.history.back();
			},
			InputSearch(){
				console.log(this.searchinfo);
				this.showlist = true;
				this.searchlist = '';
				var url = this.HOST;
				this.$axios.get(url,{
					params:{
						format:'json',
						method:'baidu.ting.search.catalogSug',
						query:this.searchinfo
					}
				})
				.then(res =>{
					console.log(res.data.song);
					this.searchlist = res.data.song;
					console.log(this.searchlist);
				})
			},
			ListHide(){
				this.showlist = false;
			}
		}	
	}
</script>

<style lang="less" scoped>
	.distance{
		height: 20/100rem;
		background: #DBD7DF;
	}
	// 搜索历史开始
	.history-box{
		width: 100%;
		.history{
			width: 710/100rem;
			margin-left: 20/100rem;
			overflow: hidden;
			.title{
				font-size: 30/100rem;
				color:#333;
				margin-top: 31/100rem;
				margin-bottom: 27/100rem;
				.two{
					float: right;
					font-size: 24/100rem;
					color:#9F9E9E;
				}
			}
			.items{
				width: 100%;
				font-size: 24/100rem;
				li{
					margin-bottom: 38/100rem;
				}
				.two{
					float: right;
					img{
						width: 20/100rem;
						height: 20/100rem;
					}
				}
			}
		}
	}
	// 搜索历史结束
	// 热搜榜开始
	.hot-box{
		width: 100%;
		margin-top: 88/100rem;
		.hot{
			margin-left: 20/100rem;
			h2{
				height: 99/100rem;
				line-height: 99/100rem;
				margin-top: 5/100rem;
				font-size: 30/100rem;
				color:#333;
			}
		}
	}
	.search-item a{
		display: inline-block;
		width: 150/100rem;
		height: 60/100rem;
		border:1/100rem solid #333;
		text-align: center;
		line-height: 60/100rem;
		border-radius: 30/100rem; 
		font-size: 24/100rem;
		color: #333;
		margin-right: 20/100rem;
		margin-bottom: 32/100rem;
	}
	.search-item a.last{
		margin-bottom: 80/100rem;
	}
	// 热搜榜结束
	// 导航条样式开始
	.nav-head{
		width: 100%;
		height: 88/100rem;
		background:url('../../assets/daohang.png');
		// overflow: hidden;
		position: fixed;
		left:0;
		top: 0;
	}
	.nav-head .arrow1{
		display: block;
		width: 40/100rem;
		height: 40/100rem;
		position: absolute;
		left: 20/100rem;
		top: 21.5/100rem;
	}
	.nav-head .title{
		width: 390/100rem;
		height: 50/100rem;
		text-align: center;
		font-size: 36/100rem;
		color: #fff;
		margin-top: 19/100rem;
		margin-left: 160/100rem;
		position: relative;
		.search-info-list{
			position: absolute;
			z-index: 11;
			width: 100%;
			top:60 / 100rem;
			background-color: #fff;
			border:1px solid #eee;
			text-align: left;
			text-indent: 10 / 100rem;
			box-shadow:  0 / 100rem 5 / 100rem #eee;
			left:-1px;
			color: #333;
			font-size: 28 / 100rem;
			ul{
				padding-top: 20 / 100rem;
				li{
					width: 100%;
					padding-top: 10 / 100rem;
					padding-bottom: 10 / 100rem
				}
			}
		}
	}
	.title>img{
		width: 32/100rem;
		height: 32/100rem;
		position: absolute;
		left: 18/100rem;
		top: 12/100rem;
	}
	.nav-head input{
		width: 100%;
		height: 100%;
		outline: none;
		border:none;
		text-indent: 65/100rem;
	}
// 	.nav-head input::-webkit-input-placeholder { /* WebKit browsers*/ 
// 　　	color:#999;
// 　　}
// 	input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
// 	　　color: #666;font-size:16px;
// 　　}
input::-webkit-input-placeholder { /* WebKit browsers */ 
	color:#666;
	font-size: 24/100rem;
} 
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
	color:#666;
	font-size: 24/100rem;
} 
input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
	color:#666;
	font-size: 24/100rem;
} 
input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
	color:#666; 
	font-size: 24/100rem;
} 
	.nav-head span{
		display: block;
		font-size: 24/100rem;
		color:white;
		position: absolute;
		right: 20/100rem;
		top: 32/100rem;
	}
	// 导航条样式结束
</style>